<template>
  <view >
    <h2>纵向滚动</h2>
    <scroll-view scroll-y="true" class="scroll-Y"
                 :scroll-top="scrollTop"
                 @scroll="scroll">
      <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item luban-bg-green">B</view>
      <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
    </scroll-view>
    <view @tap="goTop" class="uni-link uni-center uni-common-mt">点击这里返回顶部</view>

    <h2>横向滚动</h2>
    <scroll-view scroll-x="true" class="scroll-x"
                 :scroll-left="scrollLeft"
                 @scroll="scroll">
      <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item_H luban-bg-green">B</view>
      <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
    </scroll-view>

    <h2>纵向滚动事件</h2>
    <scroll-view scroll-y="true" class="scroll-Y"
                 @scrolltoupper="scrolltoupper">
      <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item luban-bg-green">B</view>
      <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
    </scroll-view>

    <h2>纵向滚动事件</h2>
    <scroll-view scroll-y="true" class="scroll-Y"
                 @scrolltoupper="scrolltoupper">
      <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item luban-bg-green">B</view>
      <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 50,
      scrollLeft: 50,
      old: {
        scrollTop: 10
      }
    }
  },
  methods: {
    scrolltoupper:()=>{
      uni.showToast({
        icon:"none",
        title:"滚动到顶了"
      })
    },
    scroll: function(e) {
      console.log(e)
      this.old.scrollTop = e.detail.scrollTop
    },
    goTop: function(e) {
      this.scrollTop = this.old.scrollTop
      this.$nextTick(() => {
        this.scrollTop = 0
      });
      uni.showToast({
        icon:"none",
        title:"纵向滚动 scrollTop 值已被修改为 0"
      })
    }
  }
}
</script>

<style scoped>
.scroll-view-item{
  line-height: 100px;
}
.scroll-Y{
  height:200px;
  width:98%;
  border:1px solid #00AAFF;
}
.scroll-x{
  white-space: nowrap;
  width: 100%;
}
.luban-bg-green{
  background: #1AAD19;
}
.scroll-view-item_H {
     display: inline-block;
     width: 100%;
     height: 300rpx;
     line-height: 300rpx;
     text-align: center;
     font-size: 36rpx;
   }
</style>
